<!--
 * @Files: 
 * @Version: 1.0
 * @Author: wanglu
 * @Date: 2020-03-17 09:41:33
 * @LastEditors: wangzhichiao<https://github.com/wzc570738205>
 * @LastEditTime: 2020-05-10 16:00:45
 -->
<template>
  <div style="height:100%">
    <leftNav :active="active" />

    <div class="home">
      <el-row :gutter="10" style="height:100%">
        <el-col :span="8" style="height:100%">
          <el-row :gutter="0" style="height:100%">
            <el-col
              :span="24"
              style="height:calc(50% - 10px);margin-bottom:20px;"
            >
              <div class="box1">
                <div class="title">
                  >>检索条件
                </div>
                <div class="box">
                  <div>
                    项目名称：<input type="text" placeholder="项目名称" />
                  </div>
                  <div>
                    项目类型：<select name="" id="">
                      <option value="xx">全部</option>
                      <option value="xx">房建</option>
                    </select>
                  </div>
                  <div>
                    项目编号：<input type="text" placeholder="项目编号" />
                  </div>
                  <div>
                    <button>检索</button>&nbsp;&nbsp;&nbsp;&nbsp;
                    <button>定位</button>
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :span="24" style="height:calc(50% - 10px)">
              <div class="box1">
                <div class="title">
                  >>项目信息
                </div>
                <div class="box xx" v-show="!clickf">
                  <span>无检索</span>
                </div>
                <div class="box yy" v-show="clickf">
                  <div>
                    项目编号：<input
                      type="text"
                      placeholder="项目名称"
                      value="454EQR67RR"
                    />
                  </div>
                  <div>
                    项目名称：<input
                      type="text"
                      placeholder="项目编号"
                      value="湖南洞庭湖水库引水工程施工I标"
                    />
                  </div>
                  <div>
                    项目地址：<input
                      type="text"
                      placeholder="项目编号"
                      value="水利"
                    />
                  </div>
                  <div>
                    项目类型：<input
                      type="text"
                      placeholder="项目编号"
                      value="湖南省茅草街洞庭湖"
                    />
                  </div>
                  <div>
                    项目简介：
                    <textarea name="" id="" cols="2" rows="5">
1、工程概况。湖南省洞庭湖区垸内现有撇洪渠304条长1299.3千米，内湖、哑河122处，水面面积806.7平方公里，靠水闸与洞庭湖和湘、资、沅、澧四水相连。受泥沙淤积及江湖关系变化影响，垸内内湖、河流淤积萎缩，河湖阻隔，调蓄功能下
降，水体交换不足，造成内涝渍灾加剧，灌溉供水困难，垸内水环境容量、水生态环境呈恶化趋势。针对上述问题，根据洞庭湖区河、湖及垸内湖泊、哑河、渠系现状，结合区域水资源量状况及地势和地理位置，经初步研究，按分水系分区域的原则，初步拟定实施沅澧河湖水系等13处河湖连通工程。
2、工程建设的必要性。-.是建设河湖连通工程，是提高水系调蓄能力，提高防洪调度和水资源统筹配置能力，恢复河湖生态功能，改善水生态环境，保障河湖健康的有效手段;二是中央鼓励加快河湖连通工程建设。2011 年中央1号文件和中央水利工作会议都对河湖水系连通工程建设提出了明确要求;三是当前洞庭湖严峻的水资源、水生态形势要求加快实施河湖水系连通工程。
				</textarea
                    >
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="16" style="height:100%">
          <div class="box1">
            <baidu-map
              class="map"
              :zoom="zoom"
              center="赫章"
              :scroll-wheel-zoom="true"
            >
              <bm-marker
                :position="{ lng: 116.25029, lat: 39.5402 }"
                :dragging="true"
              >
              </bm-marker>
              <bm-overlay pane="labelPane" class="sample" @draw="draw">
                <div><i @click="clickmap" class="fa fa-building"></i></div>
              </bm-overlay>
            </baidu-map>
            <i class="fa fa-arrows-alt fa-lg icon" @click="gomap"></i>
            <!--       <i @click="clickmap" class="fa fa-building sample b1"></i>
            <i @click="clickmap" class="fa fa-building sample b2"></i>
            <i @click="clickmap" class="fa fa-building sample b3"></i>
            <i @click="clickmap" class="fa fa-building sample b4"></i> -->
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import leftNav from "../../layout/components/leftNav/leftNav";

export default {
  name: "home",
  data() {
    return {
      active: "home",
      zoom: 18,
      clickf: false,
    };
  },
  components: {
    leftNav,
  },
  mounted() {},
  computed: {},
  methods: {
    gomap() {
      this.$router.push({ path: "/home" });
    },
    clickmap() {
      this.clickf = true;
    },
    draw({ el, BMap, map }) {
      const pixel = map.pointToOverlayPixel(
        new BMap.Point(104.712733, 27.117008)
      );
      el.style.left = pixel.x - 60 + "px";
      el.style.top = pixel.y - 20 + "px";
    },
  },
};
</script>

<style lang="scss" scoped>
.home {
  padding: 10px;
  height: calc(100% - 35px);

  .box1 {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border-width: 2px;
    border-style: solid;
    border-color: rgb(0, 51, 102);
    padding: 5px 10px;
    position: relative;
    .icon {
      position: absolute;
      z-index: 9;
      top: 20px;
      right: 20px;
      font-size: 30px;
      cursor: pointer;
    }
    .sample {
      position: absolute;
      z-index: 9;

      font-size: 30px;
      cursor: pointer;
      color: red;
    }
    .sample:hover {
      color: #3e8cdd;
    }
    .b1 {
      top: 50px;
      left: 50px;
    }
    .b2 {
      top: 200px;
      left: 150px;
    }
    .b3 {
      top: 100px;
      right: 50px;
    }
    .b4 {
      top: 80px;
      right: 150px;
    }
  }
  .map {
    width: 100%;
    height: 100%;
  }
  .title {
    color: rgb(62, 140, 221);
    font-size: 16px;
    padding-bottom: 5px;
  }
  .box {
    border-width: 0px;
    width: calc(100% - 10px);
    height: calc(100% - 30px);
    background-color: rgba(29, 40, 72, 1);
    border-radius: 20px;
    font-size: 20px;
    color: #ffffff;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 50px;
    > div {
      margin: 5px 0;
    }
  }
  .xx {
    align-items: center;
    justify-content: center;
    padding: 0;
  }
  .yy {
    font-size: 16px;
    padding: 0;
    width: 100%;
    padding: 0 10px;
    input {
      width: 270px;
    }
  }
  input {
    width: 195px;
    height: 28px;
    background-color: transparent;
    font-family: "宋体 Bold", "宋体 常规", "宋体";
    font-weight: 700;
    font-style: normal;
    font-size: 14px;
    text-decoration: none;
    color: #ffffff;
    text-align: left;
    border-color: transparent;
    outline-style: none;
    border: 1px solid #3e8cdd;
    border-radius: 5px;
    font-size: 14px;
  }
  select {
    width: 195px;
    height: 28px;
    background-color: transparent;
    font-family: "宋体 Bold", "宋体 常规", "宋体";
    font-weight: 700;
    font-style: normal;
    font-size: 14px;
    text-decoration: none;
    color: #ffffff;
    text-align: left;
    border-color: transparent;
    outline-style: none;
    border: 1px solid #3e8cdd;
    border-radius: 5px;
    font-size: 18px;
  }
  button {
    border-width: 0px;
    width: 67px;
    height: 20px;
    background: inherit;
    background-color: rgba(51, 171, 255, 1);
    border: none;
    border-radius: 6px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    font-family: "宋体 常规", "宋体";
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    color: #ffffff;
  }
}
textarea {
  width: 270px;

  background-color: transparent;
  font-family: "宋体 Bold", "宋体 常规", "宋体";
  font-weight: 700;
  font-style: normal;
  font-size: 14px;
  text-decoration: none;
  color: #ffffff;
  border-color: transparent;
  outline-style: none;
  border: 1px solid #3e8cdd;
  border-radius: 2px;
}
</style>
